<template>
  <div class="">
      <div class="menu"  :class="{'menu-donghua': isCollapse}">
        <img :class="{'img-donghua': isCollapse}" src="@/assets/bear.png"/>
        <p v-if="!isCollapse" class="bold">后台管理系统</p>
        <!-- 此处放置导航 -->
        <div class="align-left menu-box">
          <el-menu :collapse="isCollapse" @select="toRoute" :router="true">
            <el-menu-item index="1" :route="{path: '/home'}">
              <i class="el-icon-s-home colorBlack"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="2"  :route="{path: '/user'}">
              <i class="el-icon-s-help colorBlack"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="3"  :route="{path: '/admin'}">
              <i class="el-icon-s-custom colorBlack"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>

          </el-menu>
        </div>
      </div>
      <div class="main"  :class="{'main-donghua': isCollapse}">
        <div class="main-top flex between">
          <div class="icon-box" :class="{'icon-donghua': isCollapse}">
            <i v-if="!isCollapse" class="el-icon-s-fold" @click="isCollapse = true"></i>
            <i v-if="isCollapse" class="el-icon-s-unfold" @click="isCollapse = false"></i>
          </div>
          <div>
            <img class="avatar" width="30" src="@/assets/1.webp">
          </div>
        </div>
        <div class="main-bottom">
          <router-view></router-view>
          <!-- 此处内容会发生变化 -->
          <!-- <div class="main-box">
            即将在此处撰写内容
          </div> -->
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isCollapse: false  // true 代表收缩导航
    }
  },
  methods: {
    toRoute (index,path) {
      console.log(index,path);
    }
  }
}
</script>

<style scoped>
.main-bottom{
  background: #f5f5f5;
  height: 100%;
  padding: 15px;
  padding-top: 55px;

}
.main-box{
  height: 200px;
  background: #fff;
}
.avatar{
  width: 30px;
  height: 30px;
  margin-top: 5px;
  margin-right: 15px;
  border-radius: 50%;
}
.icon-box{
  line-height: 40px;
  margin-left: 215px;
}
.menu{
  /* flex: 3; */
  position: fixed;
}
.main{
   margin-left: 200px;
}
.main-donghua{
  animation:  main 1s forwards;;
}
.main-top{
  height: 40px;
  width: 100%;
  left: 0;
  background: blanchedalmond;
  position: fixed;
  z-index: 100;
}
.menu >>> .el-menu{
  background: none;
}
.menu >>> .el-menu-item.is-active{
  color: #9b766e;
}
.menu >>> .is-active{
  background: #f5f5f5;
}
.menu >>> .is-active .colorBlack{
  color: #9b766e !important;
}
.menu{
  height: 100vh;
  width: 200px;
  background: #CAAAA3;
  text-align: center;
  z-index: 200;
}
.menu img{
  margin-top: 60px;
  width: 100px;
  
}
.img-donghua{
  animation: img 1s forwards;
}
.menu-donghua{
  animation: menu 1s forwards;
}
.icon-donghua{
  animation: icon 1s forwards;
}
.align-left{
  text-align: left;
}
.menu-box{
  margin-top: 40px;
}
@keyframes img{
  from{
    width: 100px;
  }
  to{
    width: 50px;
  }
}
@keyframes menu{
  from{
    width: 200px;
  }
  to{
    width: 65px;
  }
}
@keyframes main{
  from{
    margin-left:  200px;
  }
  to{
    margin-left:  65px;
  }
}
@keyframes icon{
  from{
    margin-left:  215px;
  }
  to{
    margin-left:  80px;
  }
}
</style>